<template>
    <div class="reset-container">
      <el-card class="box-card">
        <h2 class="title">重置密码</h2>
        <el-form
          :model="resetForm"
          status-icon
          ref="resetForm"
          label-position="left"
          label-width="90px"
          class="reset-form"
        >
          <el-form-item label="用户名" prop="username">
            <el-input v-model="resetForm.username" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="phone">
            <el-input v-model="resetForm.phone" placeholder="请输入电话"></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="pass">
            <el-input
              type="password"
              v-model="resetForm.pass"
              autocomplete="off"
              placeholder="请输入新密码"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="newPassword">
            <el-input
              type="password"
              v-model="resetForm.newPassword"
              autocomplete="off"
              placeholder="请确认新密码"
            ></el-input>
          </el-form-item>
        </el-form>
  
        <div class="btnGroup">
          <el-button type="primary" @click="submitForm('resetForm')">重置密码</el-button>
          <el-button @click="reForm('resetForm')">重置</el-button>
          <router-link to="/">
            <el-button type="success" style="margin-left: 10px">登录</el-button>
          </router-link>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  import request from '../../utils/request';
  
  export default {
    data() {
      var validatePass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          if (this.resetForm.checkPass !== "") {
            this.$refs.resetForm.validateField("checkPass");
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.resetForm.pass) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      return {
        resetForm: {
          username: "",
          phone: "",
          pass: "",
          newPassword: "",
        },
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            const resetData = {
              username: this.resetForm.username,
              newPassword: this.resetForm.newPassword,
              phone: this.resetForm.phone,
            };
            request.put('forgetPassword',resetData).then(res => {
              console.log("前端输入数据", this.resetForm);
              if (res.code === "200") {
                this.$message.success('密码重置成功');
              } else {
                console.log(res);
                this.$message.error('密码重置失败');
              }
            }).catch(err => {
              this.$message.error('网络请求失败，请稍后再尝试');
            });
          } else {
            return false;
          }
        });
      },
      reForm(formName) {
        this.$refs[formName].resetFields();
      },
    },
  };
  </script>
  
  <style scoped>
  .reset-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #f0f2f5;
  }
  
  .box-card {
    width: 450px;
    padding: 30px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
  }
  
  .title {
    text-align: center;
    font-size: 24px;
    color: #333;
    margin-bottom: 20px;
  }
  
  .reset-form {
    width: 100%;
  }
  
  .btnGroup {
    text-align: center;
    margin-top: 20px;
  }
  
  .el-button {
    width: 120px;
    margin: 0 5px;
  }
  
  .el-form-item {
    margin-bottom: 20px;
  }
  
  .el-input {
    width: 100%;
  }
  </style>
  